
bady{
    background-color: #efefef;
}
.app-icon {
    position: absolute;
    left: 300px;
    top:300px;
    width: 80px;
    height: 80px;
    background-image: url(../img/app-download.png);
}

.cloud {
    position: absolute;
    left: 180px;
    top:120px;
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    background-image: url(../img/cloud.png);
    background-size: 200px 200px;
    opacity: 0;
}
/*鼠标进入*/
.easy-in {
    animation-timing-function: steps(15);
    animation-name: phone-in;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    background-position: left;
}

@keyframes phone-in {
    0% {
        background-position: left;
    }

    100% {
        background-position: right;
    }
}
/* opera */
@-o-keyframes  phone-in {
    0% {
        background-position: left;
    }

    100% {
        background-position: right;
    }
}
/* firefox */
@-moz-keyframes  phone-in {
    0% {
        background-position: left;
    }

    100% {
        background-position: right;
    }
}
/* safari 和 chrome */
@-webkit-keyframes  phone-in {
    0% {
        background-position: left;
    }

    100% {
        background-position: right;
    }
}

/*鼠标离开*/
.easy-out {
    /*
    * 检索或设置动画过渡类型。
    * 当设置为step函数时，第一个参数必须是正整数，指定函数的步数；
    * 第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
    */
    animation-timing-function: steps(15,start);
    /*动画名称*/
    animation-name: phone-out;
    /*动画持续时间*/
    animation-duration: 1.5s;
    /*动画循环次数，取值一infinite：无限循环  取值二具体数字*/
    animation-iteration-count: 1;
    /*检索或设置对象动画时间之外的状态
    * none：默认值。不设置对象动画之外的状态
    * forwards：设置对象状态为动画结束时的状态
    * backwards：设置对象状态为动画开始时的状态
    * both：设置对象状态为动画结束或开始的状态
    */
    animation-fill-mode: forwards;
    background-position: right;
}

@keyframes phone-out {
    0% {
        background-position: right;
    }

    100% {
        background-position: left;
    }
}

@-o-keyframes phone-out {
    0% {
        background-position: right;
    }

    100% {
        background-position: left;
    }
}

@-moz-keyframes phone-out {
    0% {
        background-position: right;
    }

    100% {
        background-position: left;
    }
}

@-webkit-keyframes phone-out {
    0% {
        background-position: right;
    }

    100% {
        background-position: left;
    }
}

/*鼠标在图标上*/
.easy-over {
    /*
    * 检索或设置动画过渡类型，两个参数。
    * 当设置为step函数时，第一个参数必须是正整数，指定函数的步数；
    * 第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
    */
    animation-timing-function: steps(7,start);
    /*动画名称*/
    animation-name: phone-over;
    /*动画持续时间*/
    animation-duration: 0.8s;
    /*动画循环次数，取值一infinite：无限循环  取值二具体数字*/
    animation-iteration-count: infinite;
    /*检索或设置对象动画时间之外的状态
    * none：默认值。不设置对象动画之外的状态
    * forwards：设置对象状态为动画结束时的状态
    * backwards：设置对象状态为动画开始时的状态
    * both：设置对象状态为动画结束或开始的状态
    */
    animation-fill-mode: forwards;
    background-position: -640px;
}

@keyframes phone-over {
    0% {
        background-position: -640px 50%;
    }

    100% {
        background-position: -1200px ;
    }
}

/*淡入淡出效果*/
@keyframes mFadeIn {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

.mFadeIn{
    animation-name: mFadeIn;
    animation-duration: 1s;
    animation-iteration-count: 1;
}

/*淡入淡出效果*/
@keyframes mFadeOut {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 0;
    }
}

.mFadeOut{
    animation-name: mFadeOut;
    animation-duration: 1s;
    animation-iteration-count: 1;
}
